<template>

  <div class="login-homepage-hero-module">
    <div class="login-video-container">
      <div :style="fixStyle" class="login-filter">

        <!--        登录组件-->
        <LoginForm class="loginClass"></LoginForm>

      </div>
      <video :style="fixStyle" autoplay loop muted class="login-fillWidth" v-on:canplay="canplay">
        <!--视频背景-->
        <source src="../../assets/video/1.mp4" type="video/mp4"/>
      </video>
      <div class="login-poster login-hidden" v-if="!videoCanPlay">
        <img :style="fixStyle" src="../../assets/images/index/preview1.png" alt="视频封面">
      </div>
    </div>
  </div>

</template>

<script>

  import LoginForm from '@/components/login/LoginForm.vue'

  export default {
    name: "Login2.vue",
    components: {
      // 使用组件
      LoginForm
    },
    data () {
      return {
        videoCanPlay: false,
        fixStyle: ''
      }
    },
    methods: {
      canplay() {
        this.videoCanPlay = true
      }
    },
    // 初始化页面完成调用
    mounted: function () {
      //主要是检测窗口缩放视频也同步大小
      window.onresize = () => {
        const windowWidth = document.body.clientWidth
        const windowHeight = document.body.clientHeight
        const windowAspectRatio = windowHeight / windowWidth
        let videoWidth
        let videoHeight
        if (windowAspectRatio < 0.5625) {
          videoWidth = windowWidth
          videoHeight = videoWidth * 0.5625
          this.fixStyle = {
            height: windowWidth * 0.5625 + 'px',
            width: windowWidth + 'px',
            'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
            'margin-left': 'initial'
          }
        } else {
          videoHeight = windowHeight
          videoWidth = videoHeight / 0.5625
          this.fixStyle = {
            height: windowHeight + 'px',
            width: windowHeight / 0.5625 + 'px',
            'margin-left': (windowWidth - videoWidth) / 2 + 'px',
            'margin-bottom': 'initial'
          }
        }
      }
      window.onresize();

      // 检测是否支持 localStorage
      if (! window.localStorage){
        this.$message({
          message: '您的浏览器版本太低，系统使用可能不正常',
          type: 'warning',
          duration: 0,
          showClose: true
        });
      }
    }
  }
</script>

<style scoped>

  .login-homepage-hero-module, .login-video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .login-video-container .login-poster img, .login-video-container video {
    z-index: 0;
    position: absolute;
  }

  .login-video-container .login-filter {
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
  }

  .loginClass {
    width: 500px;
    /*height: 300px;*/
    height: 250px;
    margin: 0 auto;
    position: absolute; /*绝对定位*/
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

</style>
